<template>
	<view v-if="is_init">
		<uni-popup-input name="新增/编辑" @close="on_close">

			<view class="banmi_flex a-c  p-b-10" v-if="menu_list.length>0">
				<view class="f-14 c-7" style="width: 100px;">
					上级菜单
				</view>
				<uni-data-select-lists v-model="menu_name" :parent_id="find.parent_id" :placeholder="menu_name"
					:localdata="menu_list" @change="change"></uni-data-select-lists>
			</view>

			<view class="banmi_flex a-c  p-b-10">
				<view class="f-14 c-7" style="width: 100px;">
					菜单类型
				</view>
				<view class="banmi_flex">
					<button class="banmi_flex a-c" @click="on_category(index)" v-for="(item,index) in category_list"
						:key="index">
						<view class="q-y  banmi_flex a-c j-c" :class="category_index==index ? 'key_xz' : 'key_wxz'">
							<text v-if="category_index==index" class="f-14">✓</text>
						</view>
						<text class="f-14 c-7 " style="width: 50px;"
							:class="category_index==index ? 'key_color' : ''">{{item.name}}</text>
					</button>
				</view>

			</view>
			<view class="banmi_flex a-c  p-b-10" @click="on_icon(0)">
				<view class="f-14 c-7" style="width: 100px;">
					菜单图标
				</view>
				<view v-if="find.icon" class="f-14 c-7" style="width: 30px;">
					<icon-park class="icon-color banmi_flex a-c" :type="find.icon" theme="outline"
						style="font-size: 20px;" />
				</view>
				<view class="">
					<button>
						<uni-easyinput v-model="find.icon" placeholder="请选择菜单图标" disabled>
						</uni-easyinput>
					</button>
				</view>


			</view>
			<view class="banmi_flex a-c  p-b-10">
				<view class="f-14 c-7" style="width: 100px;">
					菜单名称
				</view>
				<uni-easyinput v-model="find.menu_name" placeholder="请输入名称">
				</uni-easyinput>
			</view>
			<view class="banmi_flex a-c  p-b-10">
				<view class="f-14 c-7" style="width: 100px;">
					菜单路径
				</view>
				<uni-easyinput v-model="find.url" placeholder="请输入菜单路径">
				</uni-easyinput>
			</view>
			<view class="banmi_flex a-c  p-b-10">
				<view class="f-14 c-7" style="width: 112px;">
					权限标识
				</view>
				<textarea maxlength='-1' class="f-14 c-7 p-10" style="width: 100%;border: solid 2rpx #DCDCDC;"
					v-model="find.perms" placeholder="请输入权限标识"></textarea>
			</view>
			<view class="banmi_flex a-c  p-b-10">
				<view class="f-14 c-7" style="width: 100px;">
					显示排序
				</view>
				<uni-easyinput type="number" v-model="find.order_num" placeholder="排序(值越小越靠前)">
				</uni-easyinput>
			</view>

			<view class="banmi_flex a-c  p-b-10">
				<view class="f-14 c-7" style="width: 100px;">
					显示状态
				</view>
				<view class="banmi_flex j-c" @click="on_is_shows()">
					<view class="banmi_flex a-c  " :class="is_shows==0 ? '' : 'j-f'"
						style="width: 55px;height: 30px;border: solid #ccc 2rpx;border-radius: 25px;">
						<view v-if="is_shows==0" class=""
							style="background-color: #ccc;width: 30px;height: 30px;border-radius: 96rpx;">
						</view>
						<view v-if="is_shows==1" class=""
							style="background-color: #1E90FF;width: 30px;height: 30px;border-radius: 96rpx;">
						</view>
					</view>
				</view>
			</view>

			<view class="banmi_flex a-c  p-b-10">
				<view class="f-14 c-7" style="width: 100px;">
				</view>
				<view class="banmi_flex j-c a-c" style="width: 200rpx;height: 100rpx;">
					<button @click="subQuestion" class="sub_btn">保存</button>
				</view>
			</view>





		</uni-popup-input>


		<bicon ref="component_icon" @confirm="confirm_icon" :is_mounted="1">
		</bicon>

	</view>
</template>

<script>
	import {
		buildMenus,
		getParents,
		patTree,
		getSortMenu
	} from '@/components/uni-data-menu/util.js'
	import bicon from './icon.vue';
	import {
		IconPark
	} from '@icon-park/vue/es/all';
	export default {
		components: {
			bicon,
			IconPark
		},


		data() {
			return {
				value: 0,
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				find: {
					icon: '',
					menu_name: '',
					order_num: '',
					parent_id: 0,
					is_shows: 1,
					category: 0,
					perms: '',
					url: '',
					plugin_id: 0
				},
				menu_name: '',
				count: 1,
				maxwh: 500,
				is_jia: false,
				tab_i: 0,
				stock: '',
				mp4: '',
				quality: 1,
				imgList: [],
				windowHeight1: 0,
				windowWidth1: 0,
				menu_list: [],
				nav_id: 0,
				list_nav: [],
				category_index: 0,
				is_shows: 1,
				category_list: [{
						name: '目录',
						value: 0
					},
					{
						name: '菜单',
						value: 1
					},
					{
						name: '按钮',
						value: 2
					}
				],
				is_init: false

			}
		},

		methods: {
			subQuestion() {

				if (!this.find['menu_name']) {
					uni.showToast({
						title: '请输入菜单名称',
						icon: 'none'
					})
					return
				}

				this.ok_ajax();

			},
			async ok_ajax() {
				this.find.is_shows = this.is_shows
				var that = this;
				let requestParams = {
					id: this.menu_id,
					icon: this.find['icon'],
					menu_name: this.find['menu_name'],
					parent_id: this.find['parent_id'],
					order_num: this.find['order_num'],
					url: this.find['url'],
					perms: this.find['perms'],
					category: this.find['category'],
					is_shows: this.find['is_shows'],
					plugin_id: this.find['plugin_id'],
					plugin_catalogue: this.find['plugin_catalogue'],
					saas_type:1
				};
				const ret = await this.Banmikeji.menu_menu_add(this.menu_id, requestParams);
				uni.showToast({
					title: ret.msg,
					icon: 'none'
				})
				if (ret.status == 200) {
					location.reload()
					that.on_close()
				}
			},

			confirm_icon(icon) {
				this.find.icon = icon;
				 
			},
			on_icon() {
				this.$refs.component_icon.init()


			},
			on_category(index) {
				this.category_index = index;
				this.find.category = index
			},
			change(val, find) {
				this.menu_name = val;
				this.find['parent_id'] = find.menu_id;
				this.find['plugin_id'] = find.plugin_id;
				this.find['plugin_catalogue'] = find.plugin_catalogue
			},

			//多级分类
			async menu_init() {
				var that = this;
				let requestParams = {
					plugin_id: 0
				};
				const ret = await this.Banmikeji.menu_menu_index(requestParams);
				if (ret.status == 200) {
					var menu_list = ret.data.list;
					this.onqueryload(menu_list);
				}
			},
			//多级树
			onqueryload(data) {
				var that = this;
				for (var i = 0; i < data.length; i++) {
					let item = data[i]
					const depth = getParents(data, item.menu_id)
					item.name = item.name
					item.depth = depth;
				}
				const menuTree = getSortMenu(data)
				const sortMenus = []
				patTree(menuTree, sortMenus)
				data.length = 0;
				data.push(...sortMenus)
				this.menu_list = data //仅导出当前页
				this.menu_name = '主类目';
				 

				if (this.find['parent_id'] > 0) {

					this.menu_list.forEach(function(item, index, arr) {
						if (item['menu_id'] == that.find['parent_id']) {
							that.menu_name = item['menu_name']
							that.find['parent_id'] = item['menu_id']
							that.find['plugin_id'] = item['plugin_id']
							that.find['plugin_catalogue'] = item['plugin_catalogue']


						}
						arr[index] = item;
					});
				}

			},

		
			async init_finds() {
				var that = this;
				let requestParams = {
					id: this.id,
				};
 
				const ret = await this.Banmikeji.menu_menu_find(requestParams);
    
				if (ret.status == 200) {
					this.find = ret.data.find
					  
					this.is_shows = this.find.is_shows
					this.category_index = this.find.category
				 
					this.is_init = true;



				}




			},
			// menu_id 0 大新增  1编辑  2小新增
			async init(id, menu_id) {

				var that = this;
				this.menu_id = id;
				this.id = id;
				this.find['parent_id'] = id;
			 
				if (menu_id == 2) {
					this.menu_id = 0;
				}
				this.menu_init();
				if (menu_id == 2) { //新增
					 this.is_init = true;
					 return
				}
				if (menu_id == 0) { //新增
					this.is_init = true;
					return

				}




				let requestParams = {
					id: this.menu_id,
				};

				const ret = await this.Banmikeji.menu_menu_find(requestParams);

				if (ret.status == 200) {

					this.find = ret.data.find
					if (this.find) {
						this.is_shows = this.find.is_shows
						this.category_index = this.find.category
						this.is_init = true;

					}


				}


			},
			on_close() {
				this.find = {}
				this.is_init = false;
			},
			//js分类方法

		}
	}
</script>

<style>
	.top_head {
		background-color: #F8F8F8;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.but {
		width: 120rpx;
		height: 100rpx;
		padding: 0;
		border: 0;
		background-color: transparent;
		outline: none;
	}


	.top_but {
		background-color: #F8F8F8;
		width: 100%;
		height: 100rpx;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.zu_but {
		position: fixed;
		height: 100rpx;
		z-index: 999;
		background-color: #F8F8F8;
		bottom: 288rpx;
	}

	.option_box {
		width: 35rpx;
		height: 35rpx;
		border: 1rpx solid #999999;
		border-radius: 5px;
		margin-right: 10rpx;
		// background-color: #FF852A;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.option_box_active {
		background: linear-gradient(-30deg, #ff7029 0%, #faa307 100%);
		border: 1rpx solid #faa307 !important;
	}

	.sub_btn_add {
		margin-left: 30rpx;
		width: 150rpx;
		height: 60rpx;
		background: linear-gradient(-30deg, #A9A9A9 0%, #A9A9A9 100%);
		border-radius: 44rpx;

		font-size: 30rpx;
		font-weight: 700;
		color: #ffffff;

		line-height: 60rpx;
	}

	.sub_btn {

		height: 70rpx;
		width: 150rpx;
		background: #0071FE;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 70rpx;
	}


	.zu_but {
		position: fixed;
		height: 100rpx;
		z-index: 8;
		background-color: #F8F8F8;
		bottom: 298rpx;
	}

	.option_box {
		width: 35rpx;
		height: 35rpx;
		border: 1rpx solid #999999;
		border-radius: 5px;
		margin-right: 10rpx;
		// background-color: #FF852A;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.option_box_active {
		background: linear-gradient(-30deg, #ff7029 0%, #faa307 100%);
		border: 1rpx solid #faa307 !important;
	}

	.sub_btn_add {
		margin-left: 30rpx;
		width: 150rpx;
		height: 60rpx;
		background: linear-gradient(-30deg, #A9A9A9 0%, #A9A9A9 100%);
		border-radius: 44rpx;

		font-size: 30rpx;
		font-weight: 700;
		color: #ffffff;

		line-height: 60rpx;
	}

	.sub_btn {

		height: 70rpx;
		background: #0071FE;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 70rpx;
	}

	button::after {
		border: none;
	}

	button {
		background-color: unset;

	}
</style>